import { defineStore } from "pinia";
import { initTubings, updateTubings } from "@/api/tubing";
import { reactive } from "vue";
import d3DrawStore from "@/store/modules/d3Draw";
const tubingStore = defineStore("tubingStore", () => {
  const tubings = reactive([]);
  const d3Draw = d3DrawStore();
  const tubingData = ref([]);
  function addTubing(outerDiameter, top, bottom) {
    let obj = {
      id:0,
      top: top,
      bottom: bottom,
      outerDiameter: outerDiameter,
      innerDiameter: outerDiameter - 10,
      weight: 0,
    };
    const $ = d3Draw.$;
    const d3Canvas = d3Draw.d3Canvas;
    obj.id = tubingData.value.length
    tubingData.value.push(obj);
    tubings.push(initTubings($, d3Canvas, outerDiameter, top, bottom));
  }
  function deleteTubing(item) {
    tubings.splice(item, 1);
    tubingData.value.splice(item, 1);
  }

  return { tubingData, tubings, addTubing, deleteTubing };
});
export default tubingStore;
